import FooterPage from '@components/layout/footerPage';
import { Menu, Table,Breadcrumb,theme,Drawer, Tooltip } from 'antd';
import axios from 'axios';
import { useState } from 'react';
import { useEffect } from 'react';

const Academicteam = () => {
    const [current, setCurrent] = useState('fix');
    const [studyData, setstudyData] = useState([]);
    const [experimentData, setexperimentData] = useState([]);
    const [officeData, setofficeData] = useState([]);
    const [flowData, setflowData] = useState([]);
    const [breadcrumbItems, setBreadcrumbItems] = useState([
      {
        title: '首页',
      },
      {
        title: <a href="">学术队伍</a>,
      },
      {
        title: <a href="">固定人员</a>,
      },
    ]);
    const [selectedcontent, setSelectedcontent] = useState(null);

    useEffect(() => {
      const fetchData = async () => {
        try {
          const fixResponse = await axios.get('http://localhost:8080/web/lab_regular/list',{});
          const responseData = Array.from(fixResponse.data.data);

          const studyDataArray = responseData.filter(item => item.state === '0');
          setstudyData(studyDataArray);
    
          const experienceDataArray = responseData.filter(item => item.state  === '1');
          setexperimentData(experienceDataArray);
    
          const officeDataArray = responseData.filter(item => item.state === '2');
          setofficeData(officeDataArray);

          const flowResponse = await axios.get('http://localhost:8080/web/lab_float/list',{});
          console.log(flowResponse.data)
          const resData = Array.from(flowResponse.data.data);
          setflowData(resData);

        } catch (error) {
          console.error(error);
        }
      };
      fetchData();
    }, []);

    const handleClick = (e) => {
      setCurrent(e.key);
      // 根据选中的菜单项更新面包屑导航文字
      const breadcrumbItems = [
        {
          title: '首页',
        },
        {
          title: <a href="">学术队伍</a>,
        },
        {
          title: <a href="">{getBreadcrumbTitle(e.key)}</a>,
        },
      ];
    
      setBreadcrumbItems(breadcrumbItems); // 更新组件的状态 breadcrumbItems

      const nonshowList = document.querySelectorAll('.nonshow2');
      nonshowList.forEach((element) => {
        element.classList.remove('show');
      });
      document.getElementById(e.key).classList.add('show');
    };
    const getBreadcrumbTitle = (key) => {
      switch (key) { // 根据 key 值返回对应的面包屑导航文字
        case 'fix':
          return '固定人员';
        case 'flow':
          return '流动人员';
        default:
          return '';
      }
    };
    const paginationConfig = {
      pageSize: 5, // 每页显示的条数
    };
    const paginationConfigt2 = {
      pageSize: 15, // 每页显示的条数
    };
    const { token } = theme.useToken();
    const [open, setOpen] = useState(false);
    const showDrawer = (content) => {
      setSelectedcontent(content);
      setOpen(true);
    };
    const onClose = () => {
      setOpen(false);
    };
    const containerStyle = {
      position: 'relative',
      height: 1200,
      // textAlign: 'center',
      background: '#FFFFFF',
      border: `1px solid ${token.colorBorderSecondary}`,
      borderRadius: token.borderRadiusLG,
    };
    const studycolumns=[
      {
        title: '团队',
        dataIndex: 'name',
        width: 170,    
      },
      {
        title: '负责人',
        dataIndex: 'head',
        width: 100,    
      },
      {
        title: '团队成员',
        dataIndex: 'team',
        align: 'center',
      },
    ]
    const experiencecolumns= [
      {
        title: '试验室名称',
        dataIndex: 'name',
        width: 130,    
      },
      {
        title: '试验室负责人',
        dataIndex: 'head',
        width: 150,    
      },
      {
        title: '试验室成员',
        dataIndex: 'team',
        width: 150,    
      },
    ]
    const officecolumns= [
      {
        title: '团队',
        dataIndex: 'name',
        width: 130,    
      },
      {
        title: '负责人',
        dataIndex: 'head',
        width: 150,    
      },
      {
        title: '队伍成员',
        dataIndex: 'team',
        width: 170,    
      },
    ]
    const floatcolumns=[
      {
        title: '访学人员',
        dataIndex: 'type',
        width: 100,    
      },
      {
        title: '负责人',
        dataIndex: 'director',
        width: 100,    
      },
      {
        title: '研究内容',
        dataIndex: 'content',
        width: 100,
        render: (text,record) => (
          <Tooltip title="点击查看">
          <span
            style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', display: 'inline-block', maxWidth: '150px', cursor: 'pointer' }}
            onClick={() => showDrawer(record)}
          >
            {text.length > 10 ? text.slice(0, 10) + '...' : text}
          </span>          
          </Tooltip>
        ),
      },
      {
        title: '单位',
        dataIndex: 'unit',
        width: 100,    
      },
    ]
    
    return (
      <div className={'academicteam'}>
        <div className={'content02'}>
          {/*左导航*/}
          <div className={'left-box-02'}>
            <div className={'kong-02'}></div>
            <Menu  style={{fontSize:"18px",}} onClick={handleClick} selectedKeys={[current]} mode="inline">
              <Menu.Item key="fix" >固定人员</Menu.Item>       
              <Menu.Item key="flow" >流动人员</Menu.Item>
            </Menu> 
          </div>
          {/*右展示框*/}
          <div className={'right-box-02'}>
            <div className={'right-top-02'}>
              <p id="">学术队伍</p>
              <div className={'nav-path se'}>
                <span>
                  <Breadcrumb style={{marginTop:"10px"}} items={breadcrumbItems} />              
                </span>
              </div>
            </div>
            <div className={'nonshow2 show'} id='fix'>
              <div className={'search-p'}>研究人员</div>
              <div className={'table-box'}>
                <Table dataSource={studyData} columns={studycolumns} pagination={paginationConfig}/>
              </div>
              <div className={'text-p'}>试验人员</div>
                <div className={'table-box'}>
                  <Table dataSource={experimentData} columns={experiencecolumns} pagination={paginationConfig}/>
                </div>
              <div className={'office-p'}>办公室人员</div>
                <div className={'table-box'}>
                  <Table dataSource={officeData} columns={officecolumns} pagination={paginationConfig}/>
                </div>   
            </div>
            <div className={'nonshow2'} id='flow'>
              <div className={'table-box'}>
                <Table dataSource={flowData} columns={floatcolumns} pagination={paginationConfigt2}/>
                    <pre>
                <Drawer
                  // title={selectedcontent ? selectedcontent.name : ''}   
                  placement="bottom"
                  closable={false}
                  onClose={onClose}
                  open={open}
                  getContainer={false}
                  style={containerStyle}
                >
                  <div className='flowtitle'>
                    <span className='flowtitle01'>访学人员：{selectedcontent && <span>{selectedcontent.type}</span>}</span>
                     <span className='flowtitle02'>负责人：{selectedcontent && <span>{selectedcontent.director}</span>}</span>
                    <span className='flowtitle03'>单位： {selectedcontent && <span>{selectedcontent.unit}</span>}</span>
                  </div>
                  <div className='content-title'>
                    研究内容
                  </div>
                  <div className='flowcontent'>
                    {selectedcontent && <p>{selectedcontent.content}</p>}
                  </div> 
                </Drawer> 
                  </pre>   
              </div>  
            </div>
          </div>
        </div>
        <FooterPage />
      </div>
    );
  }
export default Academicteam;